---
description: Компонент для создания раскрывающихся/сворачивающихся блоков контента.
---

<Overview group="data-display">

# Accordion [tag:component]

Компонент для создания раскрывающихся/сворачивающихся блоков контента.

</Overview>

import { BlockWrapper } from '@/components/wrappers';

<Playground Wrapper={BlockWrapper} style={{ height: 180 }}>
  ```jsx
  <Accordion>
    <Accordion.Summary>Новый дизайн профиля</Accordion.Summary>
    <Accordion.Content>
      <Div>
        Внешний вид профиля ВКонтакте действительно обновился. К прежнему варианту вернуться уже не
        получится. В центре внимания нового дизайна — личность человека и его увлечения. Новый
        формат профиля особенно удобен для авторов контента и станет для них цифровой визиткой.
      </Div>
    </Accordion.Content>
  </Accordion>
  ```
</Playground>

## Структура

Обязательная обёртка для всего сворачивающегося контента - компонент `Accordion`.

Заголовок для триггера разворачивающегося блока необходимо вкладывать в подкомпонент `Accordion.Summary`, который
наследует все свойства компонента [`SimpleCell`](/components/simple-cell).

Сворачивающийся контент необходимо вкладывать в подкомпонент `Accordion.Content`.

## Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение
React-компонентов, прочитать про это можно в [документации React](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable).

Для использования неконтролируемого режима достаточно просто _не_ передавать `expanded` или передавать `defaultExpanded`, если
требуется задать значение по умолчанию.

Используйте свойства `expanded` и `onChange` для контролируемого управления состоянием компонента.

```jsx
// Неконтролируемое состояние, раскрыт по умолчанию
<Accordion defaultExpanded>
  <Accordion.Summary>Заголовок</Accordion.Summary>
  <Accordion.Content>
    <Div>Контент</Div>
  </Accordion.Content>
</Accordion>;

// Контролируемое состояние, раскрыт по умолчанию
const [expanded, setExpanded] = React.useState(true);
return (
  <Accordion expanded={expanded} onChange={setExpanded}>
    <Accordion.Summary>Заголовок</Accordion.Summary>
    <Accordion.Content>
      <Div>Контент</Div>
    </Accordion.Content>
  </Accordion>
);
```

## Группа аккордеонов

Компонент `Group` позволяет отображать несколько `Accordion`.

<Playground Wrapper={BlockWrapper}>

```jsx
const data = [
  {
    id: 1,
    title: 'Как сменить номер телефона?',
    detail: 'Зайдите в раздел Безопасность и вход. Укажите новый номер телефона и подтвердите его.',
  },
  {
    id: 2,
    title: 'Как изменить пароль?',
    detail:
      'Для входа во многие сервисы экосистемы VK используется один пароль. Если вы беспокоитесь по поводу безопасности, этот пароль можно изменить.',
  },
  {
    id: 3,
    title: 'Как усилить защиту аккаунта?',
    detail:
      'Используйте сложный пароль и регулярно меняйте его. Обновить пароль можно в разделе Пароль.',
  },
];

const [openId, setOpenId] = React.useState(2);

return (
  <Group mode="card" separator="hide">
    {data.map(({ id, title, detail }) => (
      <Accordion
        key={id}
        expanded={openId === id}
        onChange={(e) => (e ? setOpenId(id) : setOpenId(null))}
      >
        <Accordion.Summary>{title}</Accordion.Summary>
        <Accordion.Content>
          <Div>
            <Text>{detail}</Text>
          </Div>
        </Accordion.Content>
      </Accordion>
    ))}
  </Group>
);
```

</Playground>

## Визуальное оформление

### Иконки

Используйте свойства `ExpandIcon` и `CollapseIcon` для кастомизации иконок раскрытия/сворачивания.

<Playground Wrapper={BlockWrapper} style={{ height: 180 }}>
  ```jsx
  <Accordion>
    <Accordion.Summary
      iconPosition="before"
      ExpandIcon={Icon28AddCircleOutline}
      CollapseIcon={Icon28RemoveCircleOutline}
    >
      Новый дизайн профиля
    </Accordion.Summary>
    <Accordion.Content>
      <Div>
        Внешний вид профиля ВКонтакте действительно обновился. К прежнему варианту вернуться уже не
        получится. В центре внимания нового дизайна — личность человека и его увлечения. Новый
        формат профиля особенно удобен для авторов контента и станет для них цифровой визиткой.
      </Div>
    </Accordion.Content>
  </Accordion>
  ```
</Playground>

## Анимация

Компонент поддерживает следующие анимационные эффекты:

- плавное раскрытие/сворачивание контента;
- автоматический расчет высоты содержимого;
- поддержка прерывания анимации при быстром клике.

## Производительность

По умолчанию контент монтируется, даже если он не развернут. Такое поведение предусмотрено с учётом серверного рендеринга и SEO.

Если внутри контента находится большая иерархия компонентов или если у вас много аккордеонов,
то для улучшения производительности передавайте свойство `unmountOnCollapsed`, которое позволяет не монтировать
контент, пока он не развернут и размонтирует компонент при сворачивании.

```jsx
<Accordion unmountOnCollapsed />
```

## Доступность (a11y) [#a11y]

Доступность реализована на основе рекомендаций из [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

## Свойства и методы [#api]

<PropsTable name="Accordion">
### Accordion [#accordion-api]

### Accordion.Summary [#accordion-summary-api]

### Accordion.Content [#accordion-content-api]

</PropsTable>
